<template>
    <div style="background-color: rgba(239, 250, 251, 1);" :style="{minHeight: cardHeight + 'px'}">
        <template v-if="showFirst">
            <div class="searchIpt">
                <a-row>
                    <a-col span="24">
                        <div class="sit">外部专家检索</div>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col span="24">
<!--                        <a-input-search placeholder=""-->
<!--                                        size="large"-->
<!--                                        @search="search">-->
<!--                        </a-input-search>-->
                        <a-input-search placeholder="" @search="mainSearch">
                            <a-select slot="addonBefore" :default-value="1" style="width: 120px; font-size: 18px; border-radius: 0 0 50px 50px; padding-left: 5px;" @change="handleChange">
                                <a-select-option :value="1">
                                    姓名
                                </a-select-option>
                                <a-select-option :value="2">
                                    单位
                                </a-select-option>
                                <a-select-option :value="3">
                                    关键词
                                </a-select-option>
                            </a-select>
                        </a-input-search>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 10px auto; text-align: center" v-if="searchLogData.length > 0">
                <a-row>
                    <a-col span="24">
                        <span style="font-size: 16px;">搜索记录：</span>
                        <template v-for="item in searchLogData">
                            <a-tag color="#79abb1" style="font-size: 18px;line-height: 25px; cursor: pointer"
                                   @click="tagSearch(item.content, item.searchType)">
                                {{ item.content }}
                            </a-tag>
                        </template>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 5px auto; text-align: right;">
                <a-button style="background-color: #038181; color: #fff;" @click="toShowTop()">
                    <a-icon type="eye" theme="filled"/>
                    {{ showTop ? '查看推荐' : '排行榜' }}
                </a-button>
            </div>
            <div style="width: 80%; margin: 20px auto;" v-if="!showTop">
                <a-row :gutter="24">
                    <a-col span="12">
                        <a-card class="cardcommon first" size="small">
                            <a-row>
                                <a-col span="2" class="dott_f" style="color: rgba(0, 128, 128, 1);">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit" style="color: rgba(0, 128, 128, 1);">综合热点成果 </span>
                                    <span class="centerTit">当前的热点成果</span>
                                </a-col>
                                <!--                                <a-col span="4" class="rightTit" @click="randomFruit(1)"><a-icon type="sync" style="color: #008080"/></a-col>-->
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!isHaveFirstData">
                                <div class="spin-content_fir">
                                </div>
                            </a-spin>
                            <template v-if="isHaveFirstData">
                                <div v-for="item in hotResultData">
                                    <div class="contc_firt cont_comm">
                                        <a-row>
                                            <a-col span="18" class="dottc"
                                                   @click="showFruitInfo(item)">
                                                {{ item.fruitName }}
                                            </a-col>
                                            <a-col span="6">
                                                <span class="autn"
                                                      style="color: rgba(0, 128, 128, 1);">{{
                                                        item.fruitPubTime.substring(0, 10)
                                                    }} </span>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                    <a-col span="12">
                        <a-card class="cardcommon two" size="small">
                            <a-row>
                                <a-col span="2" class="dott_s">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit">领域成果推荐 </span>
                                    <span class="centerTit">当前研究领域关联的成果</span>
                                </a-col>
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!isHaveTwoData">
                                <div class="spin-content_sec">
                                </div>
                            </a-spin>
                            <template v-if="isHaveTwoData">
                                <div v-for="item in hyResultData">
                                    <div class="contc_sec cont_comm">
                                        <a-row>
                                            <a-col span="18" class="dottc"
                                                   @click="showFruitInfo(item)">
                                                {{ item.fruitName }}
                                            </a-col>
                                            <a-col span="6" class="centt">
                                                <span class="autn"
                                                      style="color: rgba(251, 127, 93, 1);">{{
                                                        item.fruitPubTime.substring(0, 10)
                                                    }} </span>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 20px auto;" v-if="showTop">
              <a-tabs type="card">
                <a-tab-pane key="rrff" tab="合作排行">
                  <a-row :gutter="24">
                    <a-col span="12">
                      <a-card class="cardcommon first" size="small">
                        <a-row>
                          <a-col span="2" class="dott_f" style="color: rgba(0, 128, 128, 1);">•</a-col>
                          <a-col span="18" class="centt">
                            <span class="leftTit" style="color: rgba(0, 128, 128, 1);">合作次数 </span>
                          </a-col>
                        </a-row>
                        <a-row style="margin: 10px;">
                          <a-col span="18" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                            <a-radio-group name="radioGroup" v-model="firRadioValue" @change="onFirChange">
                              <a-radio :value="1">
                                论文
                              </a-radio>
                              <a-radio :value="2">
                                期刊
                              </a-radio>
                              <!--                                        <a-radio :value="3">-->
                              <!--                                            领域-->
                              <!--                                        </a-radio>-->
                            </a-radio-group>
                            <a-select style="width: 200px" @change="changeCooNumFiled"
                                      v-if="firRadioValue == 3">
                              <a-select-option v-for="item in fieldsArr" :value="item.name">
                                {{ item.name }}
                              </a-select-option>
                            </a-select>
                          </a-col>
                          <a-col span="6" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                            top:
                            <a-select default-value="20" @change="changeFirPageSize" style="width: 60px;">
                              <a-select-option value="20">
                                20
                              </a-select-option>
                              <a-select-option value="50">
                                50
                              </a-select-option>
                            </a-select>
                          </a-col>
                        </a-row>
                        <a-spin tip="数据加载中..." v-if="!showTopFirstLoading">
                          <div class="spin-content_fir">
                          </div>
                        </a-spin>
                        <template v-if="showTopFirstLoading">
                          <a-row class="colHead">
                            <a-col span="4">
                              序号
                            </a-col>
                            <a-col span="16">
                              作者姓名
                            </a-col>
                            <a-col span="4">
                              合作次数
                            </a-col>
                          </a-row>
                          <div style="height: 520px; overflow: auto;">
                            <a-row v-for="(item, index) in topFirData" :key="index" class="colCont">
                              <a-col span="4">
                                <div>{{ index + 1 }}</div>
                              </a-col>
                              <a-col span="16">
                                {{ item.talentRealName }}
                              </a-col>
                              <a-col span="4">
                                {{ searchFirTopObj.fruitType == 6 ?  item.lwCooperationNum : item.zlCooperationNum }}
                              </a-col>
                            </a-row>
                          </div>
                        </template>
                      </a-card>
                    </a-col>
                    <a-col span="12">
                      <a-card class="cardcommon first" size="small">
                        <a-row>
                          <a-col span="2" class="dott_f">•</a-col>
                          <a-col span="18" class="centt">
                            <span class="leftTit" style="color: rgba(0, 128, 128, 1);">成果数量 </span>
                          </a-col>
                        </a-row>
                        <a-row style="margin: 10px;">
                          <a-col span="18" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                            <a-radio-group name="radioGroup" v-model="secRadioValue" @change="onSecChange">
                              <a-radio :value="1">
                                论文
                              </a-radio>
                              <a-radio :value="2">
                                期刊
                              </a-radio>
                              <!--                                        <a-radio :value="3">-->
                              <!--                                            领域-->
                              <!--                                        </a-radio>-->
                            </a-radio-group>
                            <a-select style="width: 200px" @change="changFruitNumFiled"
                                      v-if="secRadioValue == 3">
                              <a-select-option v-for="item in fieldsArr" :value="item.name" allowClear>
                                {{ item.name }}
                              </a-select-option>
                            </a-select>
                          </a-col>
                          <a-col span="6" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                            top:
                            <a-select default-value="20" @change="changeSecPageSize" style="width: 60px;">
                              <a-select-option value="20">
                                20
                              </a-select-option>
                              <a-select-option value="50">
                                50
                              </a-select-option>
                            </a-select>
                          </a-col>
                        </a-row>
                        <a-spin tip="数据加载中..." v-if="!showTopTwoLoading">
                          <div class="spin-content_fir">
                          </div>
                        </a-spin>
                        <template v-if="showTopTwoLoading">
                          <a-row class="colHead">
                            <a-col span="4">
                              序号
                            </a-col>
                            <a-col span="16">
                              作者姓名
                            </a-col>
                            <a-col span="4">
                              成果数量
                            </a-col>
                          </a-row>
                          <div style="height: 520px; overflow: auto;">
                            <a-row v-for="(item, index) in topSecData" :key="index" class="colCont">
                              <a-col span="4">
                                <div>{{ index + 1 }}</div>
                              </a-col>
                              <a-col span="16">
                                {{ item.talentRealName }}
                              </a-col>
                              <a-col span="4">
                                {{ searchSecTopObj.fruitType == 6 ?  item.lwFruitCount : item.zlFruitCount }}
                              </a-col>
                            </a-row>
                          </div>
                        </template>
                      </a-card>
                    </a-col>
                  </a-row>
                </a-tab-pane>
                <a-tab-pane key="2" tab="贡献度排行">
                  <div class="ranking-card">
                    <a-table
                      :columns="ctbColumns"
                      :dataSource="ctbData"
                      :pagination="false"
                      :rowClassName="rowClassName"
                      bordered
                    >
                      <template slot="talentRealName" slot-scope="text, record, index">
                        <div style="text-align: center;">
                          <span style="font-weight: bold;">{{record.talentRealName}}</span><br/>
                          <span style="color: #3FA598;">
                          {{
                            (record.talentFruitCount > 100 && record.talentCooperationNum > 30) ? '[推荐理由：综合实力较强]' :
                            record.talentCooperationNum > 75 ? '[推荐理由：合作效果良好]' :
                            record.talentFruitCount > 200 ?  ('[推荐理由：在 '+record.talentFields.split(',')[0]+" 领域有丰富经验]") : ''
                          }}
                          </span>
                        </div>
                      </template>
                      <template slot="contribution" slot-scope="text, record">
                        <div class="contribution-bar">
                          <span class="score">{{ record.talentContributionIndex > '80' ? '优秀' :
                            record.talentContributionIndex > '70' ? '良好' :
                              record.talentContributionIndex > '40' ? '一般' : '差' }}</span>
                          <a-progress
                            :percent="parseInt(record.talentContributionIndex)"
                            :showInfo="false"
                            strokeColor="linear-gradient(90deg,
                                                        #4DA6FF 0%,
                                                        #4DA6FF 20%,
                                                        #00CC66 25%,
                                                        #00CC66 45%,
                                                        #FFD700 50%,
                                                        #FFD700 70%,
                                                        #FF6666 75%,
                                                        #FF6666 100%)"
                            :strokeWidth="4"
                            style="width: 200px; margin-left: 18px"
                          />
                        </div>
                      </template>
                      <template slot="rank" slot-scope="text, record, index">
                        <div style="text-align: center;">
                          <span v-if="index < 3">
                            <img :src="ctbMedals[index]" class="medal" />
                          </span>
                          <span v-else>{{ index + 1 }}</span>
                        </div>
                      </template>
                    </a-table>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
        </template>
        <template v-if="showTwo">
            <talent-search :key="new Date().getTime()" ref="childTalentFruit" @changeShow="showDiv"
                          @changeObj="changeObj"></talent-search>
        </template>
        <fruit-info ref="fruitInfo"></fruit-info>
    </div>
</template>

<script>

import talentSearch from './EsTalentSearch.vue'
import fruitInfo from '../FruitInfo.vue'
import { commonPostAction, postAction } from '@/api/esManage'
import Setting from '@/setting'
import wordCloudIndex from '@views/talentCooperation/common/wordCloud/wordcloudIndex.vue'
import firstRankImg from '@assets/gold-medal.png'
import secondRankImg from '@assets/silver-medal.png'
import thirdRankImg from '@assets/bronze-medal.png'

export default {
    name: 'TalentMain',
    components: {
      wordCloudIndex,
        talentSearch,
        fruitInfo
    },
    data() {
        return {
            cardHeight: 0,
            randomTags: [],
            loading: false,
            showFirst: true,
            showTwo: false,
            showThree: false,
            selectedType: 1,
            currentPage: 1,
            searchObj: {
                current: 1,
                pageNo: 1,
                pageSize: 10,
                sortField: "talentCooperationNum"
            },
            fruitData: {},
            isHaveFirstData: false,
            isHaveTwoData: false,
            isHaveThreeData: false,
            searchMainObj: {
                current: 1,
                pageNo: 1,
                pageSize: 10,
                searchType: 1,
                researchFieldNames:[],
                researchFieldKeywords:["能源", "电力"],
            },
            searchFirstObj: {
                current: 1,
                pageNo: 1,
                pageSize: 10,
                searchType: 1,
                addFieldFlag: true,
                researchFieldNames:[]
            },
            searchLogData: [],
            hotResultData: [],
            hyResultData: [],
            lwResultData: [],
            gotFruitIdList: [],
            showTop: false,
            firRadioValue: 1,
            secRadioValue: 1,
            fieldsArr: [{"name": "碳达峰碳中和研究", value: 1}, {
                "name": "新型电力系统研究",
                value: 2
            }, {"name": "能源电力战略规划研究", value: 3},
                {"name": "能源电力供需研究", value: 4}, {
                    "name": "能源电力体制改革与电力市场研究",
                    value: 5
                }, {"name": "能源电力数字经济研究", value: 6},
                {"name": "企业战略规划研究", value: 7}, {
                    "name": "企业经营与财务研究",
                    value: 8
                }, {"name": "企业运营管理研究", value: 9},
                {"name": "企业治理与风控合规研究", value: 10}, {
                    "name": "品牌文化与社会责任研究",
                    value: 11
                }, {"name": "数据、模型工具及实验室", value: 12}],
            searchFirTopObj: {
                fruitType: 6,
                pageNo: 1,
                pageSize: 20
            },
            searchSecTopObj: {
                fruitType: 6,
                pageNo: 1,
                pageSize: 20
            },
            searchContributionObj: {
              fruitType: 6,
              pageNo: 1,
              pageSize: 10
            },
            showTopFirstLoading: false,
            showTopTwoLoading: false,
            topFirData: [],
            topSecData: [],
            ctbMedals: [
              firstRankImg,
              secondRankImg,
              thirdRankImg
            ],
            ctbColumns: [
              { title: '排名', dataIndex: 'rank', key: 'rank', scopedSlots: { customRender: 'rank' }, width: 70 },
              { title: '专家', dataIndex: 'talentRealName', key: 'talentRealName' , scopedSlots: { customRender: 'talentRealName' }},
              { title: '单位', dataIndex: 'talentCompany', key: 'talentCompany'},
              { title: '研究成果', dataIndex: 'talentFruitCount', key: 'talentFruitCount', align: 'center' },
              { title: '合作次数', dataIndex: 'talentCooperationNum', key: 'talentCooperationNum', align: 'center' },
              { title: '贡献度', dataIndex: 'talentContributionIndex', key: 'talentContributionIndex', scopedSlots: { customRender: 'contribution' }, align: 'center', width: 300 }
            ],
            ctbData: []
        }
    },
    computed: {},
    created() {
        this.cardHeight = (document.documentElement.clientHeight || document.body.clientHeight);
        console.log("Setting.isMock==="+Setting.isMock);
        let researchDirection = '';
        if(Setting.isMock){
          researchDirection = "[" +
                  "{\"ftype\":\"主\",\"pro_direction_id\":\"35\",\"pro_direction\":\"(25年5月前)能源电力数字化发展\",\"dtype\":\"主\",\"pro_field\":\"(25年5月前)模型工具及实验室研发\",\"person_id\":\"1682\",\"pro_field_id\":\"6\"}," +
                  // "{\"ftype\":\"主\",\"pro_direction_id\":\"36\",\"pro_direction\":\"(25年5月前)企业数字化转型\",\"dtype\":\"主\",\"pro_field\":\"(25年5月前)能源电力数字经济研究\",\"person_id\":\"1682\",\"pro_field_id\":\"6\"}," +
                  "{\"ftype\":\"辅\",\"pro_direction_id\":\"44\",\"pro_direction\":\"(25年5月前)公司财务管理\",\"dtype\":\"辅\",\"pro_field\":\"(25年5月前)企业经营与财务研究\",\"person_id\":\"1682\",\"pro_field_id\":\"8\"}" +
            "]";
        }else{
          researchDirection = window.localStorage.getItem('researchDirection');
        }
        console.log("----window.localStorage.getItem('researchDirection')---" + researchDirection);
        if (researchDirection) {
          // 只解析一次
          const researchFields = JSON.parse(researchDirection);
          // 使用 Set 去重 pro_field
            let uniqueProFields = [...new Set(
              researchFields
                .filter(item => item.dtype === "主") // 使用严格相等避免类型转换问题
                .map(item => {
                  // 使用正则表达式移除括号及其中内容
                  return item.pro_field.replace(/\([^)]*\)/g, '').trim();
                })
            )];
            console.log("---去重后的主领域---uniqueProFields---" + JSON.stringify(uniqueProFields));
            window.localStorage.setItem("researchFields", JSON.stringify(uniqueProFields));

            this.searchMainObj.researchFieldNames = uniqueProFields;
        }

        this.getData();
    },
    methods: {
        handleChange(value) {
            console.log(`selected ${value}`);
            this.selectedType = value;
        },
        getFruitTag() {
            // this.randomTags = JSON.parse(window.localStorage.getItem("researchDirAndFields"));
            let url = "/talents/getFruitTagByField";
            postAction(url, this.searchMainObj).then(res => {
                if (res.data.success) {
                    this.randomTags = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getData() {
            /*let url = "/fruit/getMostOfNumForFieldData";
            this.isHaveFirstData = false;
            this.isHaveTwoData = false;
            this.isHaveThreeData = false;
            postAction(url, this.searchMainObj).then(res => {
              if (res.data.success) {
                this.isHaveFirstData = true;
                this.isHaveTwoData = true;
                this.isHaveThreeData = true;

                this.hotResultData = res.data.result.hotResult;
                this.hyResultData = res.data.result.hyResult;
                this.lwResultData = res.data.result.lwResult;
                // res.data.result.hyResult.forEach(result => {
                //   let arr = result.resultModelList.map((item) => {return item.id});
                //   this.gotFruitIdList = [...this.gotFruitIdList, ...arr];
                // })
                // console.log("11" + this.gotFruitIdList)
                // res.data.result.lwResult.forEach(result => {
                //   let arr = result.resultModelList.map((item) => {return item.id});
                //   this.gotFruitIdList = [...this.gotFruitIdList, ...arr];
                // })
                // console.log(this.gotFruitIdList)
              }
            }).catch(err => {
              console.log(err)
            })*/
            // this.getFruitTag();
            this.getSearchLog();
            this.getHotResult();
            this.getFieldLinkFruit();
        },
        getSearchLog(value) {
            let url = "/operationLog/getSearchLogByUserId";
            if(Setting.isMock) {
                window.localStorage.setItem('sysUserId', "1229");
                window.localStorage.setItem('realname', "李正正");
            }
            let userId = window.localStorage.getItem('sysUserId');
            commonPostAction(url, {content: value, userId: userId}).then(res => {
                if (res.data.success) {
                    this.searchLogData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getHotResult() {
            let url = "/talents/getHotFruit";
            this.isHaveFirstData = false;
            postAction(url, this.searchMainObj).then(res => {
                if (res.data.success) {
                    this.isHaveFirstData = true;
                    this.hotResultData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getFieldLinkFruit() {
            let url = "/talents/getFieldLinkFruit";
            this.isHaveTwoData = false;
            postAction(url, this.searchFirstObj).then(res => {
                if (res.data.success) {
                    this.isHaveTwoData = true;
                    this.hyResultData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })

        },
        randomFruit(type) {
            if (type == 1) {
                this.searchMainObj.pageNo = this.searchMainObj.pageNo + 1;
                this.getHotResult();
            } else if (type == 2) {
                this.searchFirstObj.pageNo = this.searchFirstObj.pageNo + 1;
                this.getFieldLinkFruit();
            }
        },
        mainSearch(value){
            this.search(value, this.selectedType);
        },
        tagSearch(value, type) {
            this.search(value, type ? type : 1);
        },
        search(value, type) {
            this.searchObj.content = value;
            if (!value) {
                this.$message.error('请输入内容!')
                return false;
            }
            this.loading = true;

            this.loading = false;
            this.searchObj.searchType = type;
            this.showDiv(false, true, false);
            this.$nextTick(() => {
                this.$refs.childTalentFruit.toSearch(this.searchObj);
            })
        },
        showDiv(firstFlag, twoFlag, threeFlag) {
            this.showFirst = firstFlag;
            this.showTwo = twoFlag;
            this.showThree = threeFlag;
            // if(twoFlag){
            //   this.$nextTick(()=>{
            //     this.$refs.childTalentFruit.toSearch(this.searchObj);
            //   })
            // }
        },
        changeObj(stype, scontent) {
            this.searchObj.searchType = stype;
            this.searchObj.content = scontent;
        },
        toTalentInfo(authorId, authorName) {
            this.$nextTick(() => {
                this.$refs.childTalentInfo.showInfo(authorId, authorName);
            })
        },
        showFruitInfo(item) {
            this.$nextTick(() => {
                this.$refs.fruitInfo.showModalInfo(item);
            })
        },
        toShowTop() {
            this.showTop = !this.showTop;
            if (this.showTop) {
                this.showTopFirstLoading = true;
                this.showTopTwoLoading = true;
                this.searchFirTopObj = {
                    fruitType: 6,
                    pageNo: 1,
                    pageSize: 20
                };
                this.searchSecTopObj = {
                    fruitType: 6,
                    pageNo: 1,
                    pageSize: 20
                };
                this.getTopFirData();
                this.getTopSecData();
                this.getContributionData();
            }
        },
        getTopFirData() {
            let url = "/talents/getCooperationNumRank";
            this.showTopFirstLoading = false;
            postAction(url, this.searchFirTopObj).then(res => {
                if (res.data.success) {
                    this.showTopFirstLoading = true;
                    this.topFirData = res.data.result.records;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getTopSecData() {
            let url = "/talents/getFruitNumRank";
            this.showTopTwoLoading = false;
            postAction(url, this.searchSecTopObj).then(res => {
                if (res.data.success) {
                    this.showTopTwoLoading = true;
                    this.topSecData = res.data.result.records;
                }
            }).catch(err => {
                console.log(err)
            })

        },
        onFirChange(value) {
            this.searchFirTopObj.field = "";
            if (this.firRadioValue == 1) {
                this.searchFirTopObj.fruitType = 6;
                this.getTopFirData();
            } else if (this.firRadioValue == 2) {
                this.searchFirTopObj.fruitType = 11
                this.getTopFirData();
            }
        },
        onSecChange(value) {
            this.searchSecTopObj.field = "";
            if (this.secRadioValue == 1) {
                this.searchSecTopObj.fruitType = 6;
                this.getTopSecData();
            } else if (this.secRadioValue == 2) {
                this.searchSecTopObj.fruitType = 11;
                this.getTopSecData();
            }
        },
        changeCooNumFiled(value) {
            this.searchFirTopObj.field = value;
            this.getTopFirData();
        },
        changFruitNumFiled(value) {
            this.searchSecTopObj.field = value;
            this.getTopSecData();
        },
        changeFirPageSize(value) {
            this.searchFirTopObj.pageSize = value;
            this.getTopFirData();
        },
        changeSecPageSize(value) {
            this.searchSecTopObj.pageSize = value;
            this.getTopSecData();
        },
        getContributionData() {
          let url = "/talents/getContributionRank";
          postAction(url, this.searchContributionObj).then(res => {
            if (res.data.success) {
              this.ctbData = res.data.result.records;
            }
          }).catch(err => {
            console.log(err)
          })
        },
        rowClassName(record, index) {
          if (index === 0) return 'row-gold'
          if (index === 1) return 'row-silver'
          if (index === 2) return 'row-bronze'
          return ''
        }
    }
}
</script>

<style>
::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgb(121, 171, 177);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 128, 128, 1);
}

::-webkit-scrollbar-track {
    background-color: transparent;
    padding: 2px;
}
</style>

<style scoped>

/deep/ .searchIpt .ant-input-group .ant-input {
    height: 50px !important;
    line-height: 50px !important;
}

/deep/ .searchIpt .ant-input-group .ant-input-group-addon {
    border-radius: 50px 0 0 50px !important;
}

/deep/ .searchIpt .ant-input-group .ant-input {
    border-radius: 0 50px 50px 0 !important;
}

/deep/ .searchIpt .ant-input-group .ant-input-affix-wrapper {
    font-size: 20px;
}

/deep/ .searchIpt .ant-input-affix-wrapper .ant-input {
    border-radius: 50px;
    height: 50px !important;
    padding-left: 20px;
}

/deep/ .searchIpt .ant-input-search-icon {
    font-size: 25px;
}

.sit {
    line-height: 80px;
    color: rgba(3, 129, 129, 1);
    font-size: 40px;
    text-align: center;
}

.searchIpt {
    height: 130px;
    width: 800px;
    margin: auto;
}

.cardcommon {
    line-height: 20px;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
}

.first {
    background: linear-gradient(134.48deg, rgba(239, 250, 251, 1) 0.4%, rgba(182, 217, 206, 0.8) 100.41%);
    color: rgba(16, 16, 16, 1);
    border: 1px solid rgba(0, 128, 128, 1);
}

.two {
    background: linear-gradient(135deg, rgba(255, 207, 195, 0.27) 1.37%, rgba(251, 127, 93, 0.43) 100.45%);
    color: rgba(251, 127, 93, 1);
    border: 1px solid rgba(251, 127, 93, 1);
}

.three {
    background: linear-gradient(134.77deg, rgba(96, 129, 245, 0.13) -0.15%, rgba(96, 129, 245, 0.59) 99.95%);
    color: rgba(96, 129, 245, 1);
    border: 1px solid rgba(96, 129, 245, 1);
}

.dott_f {
    font-size: 75px;
    color: rgba(0, 128, 128, 1);
}

.dott_s {
    font-size: 75px;
    color: rgba(251, 127, 93, 1);
}

.dott_t {
    font-size: 75px;
    color: rgba(96, 129, 245, 1);
}

.leftTit {
    height: 35px;
    font-size: 24px;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
}

.centt {
    text-align: left;
}

.centerTit {
    height: 20px;
    opacity: 0.3;
    color: rgba(16, 16, 16, 1);
    font-size: 15px;
    text-align: left;
    padding-left: 10px;
}

.rightTit {
    font-size: 18px;
    line-height: 35px;
    font-weight: bold;
    cursor: pointer;
    text-align: right;
}

.dottc {
    line-height: 35px;
    height: 35px;
    font-size: 15px;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autn {
    font-size: 18px;
    text-align: left;
    height: 35px;
    line-height: 35px;
}

.contc_firt {
    background-color: rgba(84, 211, 170, 0.38);
    border: 1px solid rgba(0, 128, 128, 1);
}

.contc_sec {
    background-color: rgba(255, 207, 195, 1);
    border: 1px solid rgba(251, 127, 93, 1);
}

.contc_thr {
    background-color: rgba(195, 207, 252, 1);
    border: 1px solid rgba(96, 129, 245, 1);
}

.cont_comm {
    line-height: 20px;
    border-radius: 10px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    margin: 10px;
}

.spin-content_fir {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}

.spin-content_sec {
    border: 1px solid rgba(251, 127, 93, 1);
    background-color: rgba(251, 127, 93, 1);
    padding: 30px;
}

.spin-content_thr {
    border: 1px solid rgba(96, 129, 245, 1);
    background-color: rgba(96, 129, 245, 1);
    padding: 30px;
}

.colHead {
    font-size: 16px;
    padding: 5px;
    background-color: rgb(121, 171, 177);
    color: #fff;
}

.colCont {
    font-size: 16px;
    padding-top: 5px;
    height: 25px;
}
.ranking-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px #f0f1f2;
}
.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #5d3fd3;
}
.total {
  color: #8c8c8c;
}
.expert-info {
  display: flex;
  align-items: center;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}
.name {
  font-weight: bold;
  font-size: 16px;
}
.dept {
  color: #b1b1b1;
  font-size: 13px;
}
.medal {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
/deep/ .row-gold {
  background: #fff9db !important;
}
/deep/ .row-silver {
  background: #f6faff !important;
}
/deep/ .row-bronze {
  background: #f9f7ff !important;
}
.contribution-bar {
  display: flex;
  align-items: center;
}
.score {
  color: #008080FF;
  font-weight: bold;
  font-size: 18px;
}
</style>